<template>
  <div class="devices-task">
    <div class="container">
      <!-- 任务列表 -->
      <div class="task-box" v-show="taskList.length">
        <div class="task-li" v-for="task in taskList" :class="{'on': task.open}">
          <div class="task-time">
            <span>20:00</span>
          </div>
          <div class="task-content">
            <span>任务内容</span>
          </div>
          <!-- <div class="touch-mask" @touchstart="closeAllList(task)" v-ev:drag="[dragList, task]" v-ev:dragend="[dragendList, task]"></div> -->
          <div class="touch-mask" v-leftswipe="canSwipe"></div>
          <div class="hide-btn">
            <div class="btn-edit" v-ev:tap="[editTaskEvent, task]">编辑</div>
            <div class="btn-delete" v-ev:tap="[deleteTaskEvent, task]">删除</div>
          </div>
          <div class="task-onoff" :class="{'on': task.open}" v-ev:tap.stop="[onoffTask,task]">
            <div class="prompt-box">
              <div class="prompt-background"></div>
            </div>
            <div class="prompt-button"></div>
          </div>
        </div>
      </div>
      <!-- 无网关提示 -->
      <div class="no-task" v-show="!taskList.length">
        <warn :title="'暂无设备任务'" :tips="'您可以创建一个设备任务以使设备在指定时间执行相关操作'"></warn>
      </div>
      <div class="btn-box" v-ev:tap.stop="[creatTaskEvent]">
        <div class="btn">创建任务</div>
      </div>
      <!-- ios页面跳转强制刷新title -->
    </div>
    <modal :show="showDeleteModal" @close="showDeleteModal=false">
      <div slot="body">
        <p>您是否确定删除该任务？</p>
      </div>
      <div slot="footer" class="actions">
        <div class="btn" @touchend="cencelDeleteTask">取消</div>
        <div class="btn" @touchend="confirmDeleteTask">确定</div>
      </div>
    </modal>
    <iframe src="./static/logo.png" style="display:none"></iframe>
  </div>
</template>

<script>
  var Warn = require('../../../shared/components/warn.vue')
  var Modal = require('../../../shared/components/modal.vue')

  import { globalMixins } from '../../mixins'

  export default {
    mixins: [globalMixins],

    components: {
      'warn': Warn,
      'modal': Modal
    },

    data () {
      return {
        // 任务列表是否可以可以左滑
        canSwipe: true,
        // 是否显示删除任务浮层
        showDeleteModal: false,
        // 临时保存已经左滑的任务
        selectedTask: {},
        // 设备列表
        taskList: [
          {
            time: '20:00',
            open: false,
            content: '灯03关闭,星期一',
            left: 0
          },
          {
            time: '21:00',
            open: true,
            content: '灯02关闭,星期一',
            left: 0
          }
        ]
      }
    },
    route: {
      data () {
        this.setTitle('设备任务')
      }
    },
    ready () {
      // this.showLoading()
      // setTimeout(() => {
      //   this.hideLoading()
      // }, 3000)
    },
    methods: {
      /**
       * 关闭已经左滑的浮层
       * @return {[type]} [description]
       */
      closeAllLeftSwipe () {
        this.canSwipe = false
        setTimeout(() => {
          this.canSwipe = true
        }, 0)
      },
      /**
       * 创建任务按钮
       * @return {[type]} [description]
       */
      creatTaskEvent () {
        this.log('创建任务')
        this.linkTo('/devices/task/create')
      },
      /**
       * 编辑任务事件
       * @param  {object} task 当前任务对象
       * @return {[type]}      [description]
       */
      editTaskEvent (task) {
        this.log('编辑任务')
        this.linkTo('/devices/task/edit')
      },
      /**
       * 显示删除任务弹窗
       * @param  {[type]} task [description]
       * @return {[type]}      [description]
       */
      deleteTaskEvent (task) {
        this.log('显示删除任务弹窗')
        this.showDeleteModal = true
        this.selectedTask = task
      },
      /**
       * 删除任务弹窗的确定按钮
       * @return {[type]} [description]
       */
      confirmDeleteTask () {
        this.log('确定删除任务' + JSON.stringify(this.selectedTask))
        this.taskList.$remove(this.selectedTask)
        this.showDeleteModal = false
      },
      /**
       * 删除浮层的取消按钮
       * @return {[type]} [description]
       */
      cencelDeleteTask () {
        this.showDeleteModal = false
        this.closeAllLeftSwipe()
      },
      /**
       * 开关任务
       * @param  {[type]} task [description]
       * @return {[type]}      [description]
       */
      onoffTask (task) {
        task.open = !task.open
      },
      /**
       * 跳转页面
       * @param  {[type]} path [description]
       * @return {[type]}      [description]
       */
      linkTo (path) {
        this.$route.router.go(path)
      }
    }
  }
</script>

<style lang="stylus">
  @import '../../../shared/assets/style/common'

  .devices-task
    width 100%
    height 100%
    .container
      width 100%
      height 100%
      overflow-x hidden
      overflow-y auto
      margin-top 0.2rem
      padding-bottom 0.2rem
      box-sizing border-box
    .task-box
      width 100%
      margin-bottom 0.5rem
      .task-li
        width 100%
        height 2rem
        padding-left 0.4rem
        box-sizing border-box
        border-bottom 1px solid #cdcdcd
        position relative
        transition all ease 0.3s
        background #eeeeee
        &.on
          background #fff
        &:first-child
          border-top 1px solid #cdcdcd
        .task-time
          width 70%
          height 1.4rem
          line-height 1.6rem
          color #545454
          font-size 0.7rem
          white-space nowrap
          text-overflow ellipsis
        .task-content
          width 70%
          height 0.6rem
          line-height 0.4rem
          color #959595
          white-space nowrap
          text-overflow ellipsis
        .task-onoff
          position absolute
          right 0.5rem
          top 50%
          transform translate3d(0, -50%, 0)
          width 2rem
          height 1.1rem
          .prompt-box
            absolute top rem(15) right
            width rem(100)
            height rem(60)
            border-radius rem(75)
            border rem(3) solid #fff
            overflow hidden
            background #b9b9b9
            .prompt-background
              position absolute
              top 0
              right 0.79rem
              width 100%
              height 100%
              background #4dd863
              border-radius 1.2rem
              transition left 0.2s ease
          .prompt-button
            absolute top rem(18) right rem(6)
            size rem(60)
            border-radius 50%
            background #fff
            box-shadow 0 0 rem(10) rgba(0,0,0,0.3)
            transform translate3d(rem(-40),0,0)
            transition transform 0.2s ease
          &.on
            .prompt-box
              .prompt-background
                right 0
            .prompt-button
              transform translate3d(0.05rem,0,0)
        .hide-btn
          width 4rem
          height 100%
          position absolute
          left 100%
          top 0
          font-size 0
          .btn-edit
          .btn-delete
            width 2rem
            height 2rem
            line-height 2rem
            display inline-block
            text-align center
            background #09b85a
            font-size 0.5rem
            color #fff
          .btn-delete
            background #ff0000

</style>
